// pages/park/park.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 31.648640362470292,
    longitude: 117.93029931895853,
    markers: [{
      id: 0,
      name: "当前位置",
      latitude: 31.648640362470292,
      longitude: 117.93029931895853,
      width: "60rpx",
      height: "60rpx",
      iconPath: '../../images/bar/dingwei_active.png',
      customCallout: {
        anchorY: 0,
        anchorX: 0,
        display: 'ALWAYS'
      },
    }],
    customCalloutMarkerIds: [],
    num: 1,
    tabs: [],
    scale: 13,
    activeTab: 0,
    markInfoList: [{
      id: 0,
      title: "大众朗逸",
      img: "http://img.mmifx.com/miniapp/20210609153747.png",
      info: "1.6手动 | 三厢5座",
      detail: "车型详情▸ 价格日历 ▸",
      price: "69"
    }, {
      id: 1,
      title: "大众朗逸",
      img: "http://img.mmifx.com/miniapp/20210609153747.png",
      info: "1.6手动 | 三厢5座",
      detail: "车型详情▸ 价格日历 ▸",
      price: "59"
    }, {
      id: 2,
      img: "http://img.mmifx.com/miniapp/20210609162100.png",
      title: "雪佛兰新科鲁兹",
      info: "1.5手动 | 三厢5座",
      detail: "车型详情▸ 价格日历 ▸",
      price: "78"
    }, {
      id: 3,
      title: "保沃BX5",
      img: "http://img.mmifx.com/miniapp/20210609162308.png",
      info: "1.4T自动 | SUV5座",
      detail: "车型详情▸ 价格日历 ▸",
      price: "99"
    }, {
      id: 4,
      title: "保沃BX7两驱",
      img: "http://img.mmifx.com/miniapp/20210609162510.png",
      info: "2.0T自动 | SUV5座",
      detail: "车型详情▸ 价格日历 ▸",
      price: "137"
    }],
    markname: "巢湖学院自助点"
  },
  onTabClick(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  },
  // 点击了全部
  ChangeToall() {
    const allmarkers = [this.data.markers[0], {
      id: 1,
      name: "包公园自助点",
      latitude: 31.85874888528334,
      longitude: 117.29307524856563,
      width: "60rpx",
      height: "60rpx",
      iconPath: '../../images/carmark.png',
      customCallout: {
        anchorY: 0,
        anchorX: 0,
        display: 'ALWAYS'
      },
    }, {
      id: 2,
      name: "巢湖学院自助点",
      latitude: 31.641780861390522,
      longitude: 117.93425265592532,
      iconPath: '../../images/carmark.png',
      width: "60rpx",
      height: "60rpx",
      customCallout: {
        anchorY: 10,
        anchorX: 0,
        display: 'ALWAYS',
      },
    }, {
      id: 3,
      name: "巢湖火车站服务点",
      latitude: 31.604514487246938,
      longitude: 117.88654515886356,
      width: "60rpx",
      height: "60rpx",
      iconPath: '../../images/carmark.png',
      customCallout: {
        anchorY: 0,
        anchorX: 20,
        display: 'ALWAYS',
      },
    }, {
      id: 4,
      name: "巢湖东站自助点",
      latitude: 31.65087568858621,
      longitude: 117.93136530747347,
      iconPath: '../../images/carmark.png',
      width: "60rpx",
      height: "60rpx",
      customCallout: {
        anchorY: 10,
        anchorX: 0,
        display: 'ALWAYS',
      },
    }, {
      id: 5,
      name: "金裕花园自助点",
      latitude: 31.58750995094266,
      longitude: 117.86910981319124,
      iconPath: '../../images/carmark.png',
      width: "60rpx",
      height: "60rpx",
      customCallout: {
        anchorY: 10,
        anchorX: 0,
        display: 'ALWAYS',
      },
    }]
    this.setData({
      markers: allmarkers,
      customCalloutMarkerIds: [0, 1, 2, 3, 4, 5]
    })
  },
  // 放大当前点击的位置
  tapToPark(index) {
    this.setData({
      latitude: this.data.markers[index].latitude,
      longitude: this.data.markers[index].longitude,
      scale: 19,
    })
  },
  // 文字点击事件
  callouttap(e) {
    const markerIndex = e.detail.markerId;
    this.setData({
      markname: this.data.markers[markerIndex].name
    })
  },
  // 图标点击
  markertap(e) {
    const markerIndex = e.detail.markerId;
    this.setData({
      markname: this.data.markers[markerIndex].name
    })
  },
  // 列表点击
  parkListItemtap(e) {
    this.setData({
      latitude: this.data.markers[1].latitude,
      longitude: this.data.markers[1].longitude,
      scale: 19,
    })
  },
  // 地图点击事件
  maptap(e) {
    console.log("地图点击:", e);
  },
  onChange(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  },
  // 获取当前用户的的位置信息，渲染到地图
  GetUserPlace() {
    let that = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude,
          'markers[0].latitude': latitude,
          'markers[0].longitude': longitude,
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.GetUserPlace()
    this.ChangeToall()
    const tabs = [{
        title: '全部',
      },
      {
        title: '公共场库',
      },
      {
        title: '道路停车',
      },
      {
        title: '空余泊位数',
      },
    ]
    this.setData({
      tabs
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})